<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>千峰美团大数据</title>
    <link rel="stylesheet" href="./assets/css/reset.css" />
  </head>
  <body>
    <!--头-->
    <header>
      <h1>千峰美团大数据</h1>
      <span>2022年3月22日16时49分45秒</span>
    </header>
    <!--头-->
    <!--main-->
    <section class="main">
      <div class="column">
        <div class="box" style="height: 4rem"></div>
        <div class="box box-l2" style="height: 2.6rem">
          <!-- <div class="alltitle">标题样式</div>
          <div class="wraptit">
            <span>单号</span><span>金额</span><span>品名</span><span>时间</span>
          </div>
          <div class="wrap str_wrap str_vertical">
            <div class="str_move str_origin" style="top: -4.0994rem">
              <ul>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
                <li>
                  <p>
                    <span>100021415</span><span>199</span><span>手机</span
                    ><span>18小时</span>
                  </p>
                </li>
              </ul>
              <div
                class="str_move str_move_clone"
                style="top: 100%; bottom: auto; height: 360px"
              >
                <ul>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                </ul>
              </div>
              <div
                class="str_move str_move_clone"
                style="bottom: 100%; top: auto; height: 360px"
              >
                <ul>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span>100021415</span><span>199</span><span>手机</span
                      ><span>18小时</span>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div> -->
        </div>
        <div class="box box-l3" style="height: 2.6rem"></div>
      </div>
      <div class="column">
        <div class="box box-m1" style="height: 2.3rem">
          <div class="box-m1-m1">
            <h1>总体情况<span>(单位:元)</span></h1>
            <p>12345678</p>
          </div>
          <div class="box-m1-m2">
            <div class="box-m1-m2-m1"></div>
            <div class="box-m1-m2-m2"></div>
            <div class="box-m1-m2-m3"></div>
          </div>
        </div>
        <div class="box box-m2" style="height: 3.5rem"></div>
        <div class="box box-m3" style="height: 3.4rem"></div>
      </div>
      <div class="column">
        <div class="box box-r1" style="height: 3rem">
          <h3>标题</h3>
          <table class="table1" style="width: 100%">
            <thead>
              <tr>
                <th>排名</th>
                <th>公司</th>
                <th>数量</th>
                <th>增长率</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>腾讯科技</td>
                <td>114万</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>2</td>
                <td>百度公司</td>
                <td>923823万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>3</td>
                <td>新浪</td>
                <td>11240253万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>4</td>
                <td>网易</td>
                <td>1.2亿</td>
                <td>39%</td>
              </tr>
              <tr>
                <td>5</td>
                <td>雅虎</td>
                <td>13423万</td>
                <td>9%</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box box-r2" style="height: 3rem">
          <h3>标题</h3>
          <table class="table2" style="width: 100%">
            <thead>
              <tr>
                <th>排名</th>
                <th>公司</th>
                <th>数量</th>
                <th>增长率</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>腾讯科技</td>
                <td>114万</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>2</td>
                <td>百度公司</td>
                <td>923823万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>3</td>
                <td>新浪</td>
                <td>11240253万</td>
                <td>12%</td>
              </tr>
              <tr>
                <td>4</td>
                <td>网易</td>
                <td>1.2亿</td>
                <td>39%</td>
              </tr>
              <tr>
                <td>5</td>
                <td>雅虎</td>
                <td>13423万</td>
                <td>9%</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box box-r3" style="height: 3.2rem"></div>
      </div>
    </section>

    <!--main-->

    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.zhimg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="http://unpkg.com/echarts"></script>
    <script src="./assets/js/left.js"></script>
    <script src="./assets/js/m2.js"></script>
    <script src="./assets/js/m3.js"></script>
    <script src="./assets/js/m1.js"></script>
    <script src="./assets/js/l3.js"></script>
    <script src="./assets/js/r3.js"></script>
    <!-- <script src="./assets/js/l2.js"></script> -->
    <script>
      setInterval(() => {
        $("header span").html(wofDate.format("Y年m月d日H时i分s秒"));
      }, 1000);
    </script>
  </body>
</html>
